<template>
	<view class="content b-t">
		<view class="list b-b" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
			<view class="wrapper">
				<view class="address-box">
					<view class="address-info-box">
						<view class="name_and_phone">
							<view class="name">{{item.name}}</view>
							<view class="phone">{{item.phone}}</view>
						</view>
						<view class="address">
							{{item.province || ''}}{{item.area}}
						</view>
						<view class="optin-box">
							<view class="set-default-box">
								<view class="set-default" @click="setDefaultAddress(item.id,item.isDefault)">
									<image v-if="item.isDefault"
										src="https://qiniu.dadaozhixing.top/dxx/static/select_icon.png" mode="">
									</image>
								</view>
								<span>设为默认地址</span>
							</view>
							<view class="btn-box">
								<button class="action-btn" @click.stop="showDeleteAddressDialog(item.id)">删除</button>
								<button class="action-btn" @click.stop="addAddress('edit', item)">修改</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<button class="add-btn" @click="addAddress('add')">新增收货地址</button>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" title="确定删除地址"  message="成功消息" :duration="2000" :before-close="true" @close="clossDialog" @confirm="deleteAddress"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		pageListAddressApi, deleteAddressApi,updateAddressApi
	} from '@/api/user'
	export default {
		data() {
			return {
				source: 0,
				addressList: [],
				curAddressId: ''
			}
		},
		onLoad(option) {
			console.log(option.source);
			this.source = option.source;
			this.loadData()
		},
		methods: {
			async loadData() {
				let ret = await pageListAddressApi()
				if (ret && ret.code == 200) {
					this.addressList = ret.rows
				}
			},
			//选择地址
			checkAddress(item) {
				if (this.source == 1) {
					//this.$api.prePage()获取上一页实例，在App.vue定义
					this.$api.prePage().addressData = item;
					uni.navigateBack()
				}
			},
			addAddress(type, item) {
				uni.navigateTo({
					url: `/pages/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			showDeleteAddressDialog(id){
				this.curAddressId = id
				this.$refs.popup.open()
			},
			clossDialog() {
				this.$refs.popup.close()
			},
			async deleteAddress () {
				let ret = await deleteAddressApi({id: this.curAddressId})
				if (ret && ret.code == 200) {
					this.$api.msg("删除成功")
					this.loadData()
				}
				this.clossDialog()
			},
			async setDefaultAddress(aId,aIsDefault){
				if (!aIsDefault) {
					let ret = await updateAddressApi({id: aId,isDefault: true})
					if (ret && ret.code==200) {
						this.loadData()
					}
				}
				
			},
			//添加或修改成功之后回调
			refreshList(data, type) {
				//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
				this.addressList.unshift(data);

				console.log(data, type);
			}
		}
	}
</script>

<style lang='scss' scoped>
	page {
		padding-bottom: 120upx;
	}

	.content {
		position: relative;
	}

	.list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		;
		background: #fff;
		position: relative;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		border-radius: 16upx;
		background-color: #fff;

		.address-info-box {
			padding: 24upx;

			.name_and_phone {
				display: flex;

				font-weight: 600;
				font-size: 28rpx;
				color: #23242E;
				line-height: 42rpx;

				.phone {
					margin-left: 34upx
				}
			}

			.address {
				margin: 8upx 0;
				font-size: 28rpx;
				color: #23242E;
				line-height: 42rpx;
			}

			.optin-box {
				display: flex;
				align-items: center;
				width: 522upx;
				justify-content: space-between;

				.btn-box {
					display: flex;
				}
			}

			.action-btn {
				width: 96upx;
				height: 60upx;
				margin: 0;
				margin-left: 24upx;
				padding: 0;
				text-align: center;
				line-height: 60upx;
				font-size: $font-sm + 2upx;
				color: $font-color-dark;
				background: #fff;
				border-radius: 100px;

				&:after {
					border-radius: 100px;
				}

				&.recom {
					background: #3EB3F3;
					color: white;

					&:after {
						border-color: #f7bcc8;
					}
				}
			}
		}
	}

	.u-box {
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;

		.name {
			margin-right: 30upx;
		}
	}

	.icon-bianji {
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}

	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		margin-bottom: 100upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		background-color: #3EB3F3;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	.set-default-box {
		display: flex;
		font-size: 28rpx;
		color: #23242E;

		.set-default {
			width: 36rpx;
			height: 36rpx;
			margin-right: 8upx;
			border: 1rpx solid #C9C9C9;
			border-radius: 50%;
			display: flex;
			

			image {
				width: 36upx !important;
				height: 36upx;
			}
		}
	}
</style>